<template>
    <div>
      <el-button @click="scrollToRow(2)">滚动到索引为2的行</el-button>
  
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        :row-class-name="getRowClass"
        height="400px"
      >
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, nextTick } from 'vue'
  
  const tableRef = ref(null)
  const tableData = ref([
    { date: '2024-03-01', name: '张三', address: '北京市' },
    { date: '2024-03-02', name: '李四', address: '上海市' },
    { date: '2024-03-03', name: '王五', address: '广州市' },
    { date: '2024-03-04', name: '赵六', address: '深圳市' },
    { date: '2024-03-05', name: '田七', address: '杭州市' },
    { date: '2024-03-06', name: '周八', address: '苏州市' },
    { date: '2024-03-07', name: '吴九', address: '重庆市' },
    { date: '2024-03-08', name: '郑十', address: '武汉市' },
    { date: '2024-03-09', name: '钱十一', address: '成都市' },
    { date: '2024-03-10', name: '孙十二', address: '西安市' },
    { date: '2024-03-02', name: '李四', address: '上海市' },
    { date: '2024-03-03', name: '王五', address: '广州市' },
    { date: '2024-03-04', name: '赵六', address: '深圳市' },
    { date: '2024-03-05', name: '田七', address: '杭州市' },
    { date: '2024-03-06', name: '周八', address: '苏州市' },
    { date: '2024-03-07', name: '吴九', address: '重庆市' },
    { date: '2024-03-08', name: '郑十', address: '武汉市' },
    { date: '2024-03-09', name: '钱十一', address: '成都市' },
    { date: '2024-03-10', name: '孙十二', address: '西安市' },
    { date: '2024-03-02', name: '李四', address: '上海市' },
    { date: '2024-03-03', name: '王五', address: '广州市' },
    { date: '2024-03-04', name: '赵六', address: '深圳市' },
    { date: '2024-03-05', name: '田七', address: '杭州市' },
    { date: '2024-03-06', name: '周八', address: '苏州市' },
    { date: '2024-03-07', name: '吴九', address: '重庆市' },
    { date: '2024-03-08', name: '郑十', address: '武汉市' },
    { date: '2024-03-09', name: '钱十一', address: '成都市' },
    { date: '2024-03-10', name: '孙十二', address: '西安市' }
  ])
  
  const currentRowIndex = ref(null)
  
  // 滚动到目标行
  const scrollToRow = async (index) => {
    currentRowIndex.value = index
    await nextTick()
  
    const table = tableRef.value
    if (!table) return
  
    const bodyWrapper = table.$el.querySelector('.el-table__body-wrapper')
    const rows = bodyWrapper.querySelectorAll('.el-table__row')
    const targetRow = rows[index]
  
    if (!targetRow) return
  
    // 计算滚动距离
    const rowTop = targetRow.offsetTop
    const rowHeight = targetRow.offsetHeight
    const tableHeight = bodyWrapper.clientHeight
  
    const targetScrollTop = rowTop - tableHeight / 2 + rowHeight / 2
  
    bodyWrapper.scrollTo({
      top: targetScrollTop,
      behavior: 'smooth'
    })
  }
  
  // 设置高亮行样式
  const getRowClass = ({ rowIndex }) => {
    return rowIndex === currentRowIndex.value ? 'highlight-row' : ''
  }
  </script>
  
  <style scoped>
  .highlight-row {
    background-color: #fef0f0 !important;
    color: #f56c6c !important;
  }
  </style>
  